<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page import="org.jasig.cas.client.validation.Assertion" %>
<%@ page import="org.jasig.cas.client.authentication.AttributePrincipal" %>
<%@ page import="org.jasig.cas.client.util.AssertionHolder" %>
<%@ page import="java.util.Map" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<head>
    <meta charset="UTF-8">
    <title>运维人员——我的绩效</title>
    <link  rel="stylesheet" type="text/css" href="<%= basePath%>resources/css/pcrepairman.css" />
    <link rel="stylesheet" type="text/css" href="<%= request.getContextPath()%>resources/css/jNotify.jquery.css"/>
    <script src="<%= request.getContextPath()%>resources/js/pcrepairman.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="<%= request.getContextPath()%>resources/mobileOperator/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="<%= request.getContextPath()%>resources/mobileOperator/js/angular.min.js"></script>
    <script type="text/javascript" src="<%= request.getContextPath()%>resources/js/PCrepairmanController.js"></script>
    <script type="text/javascript" src="<%= request.getContextPath()%>resources/js/echarts.min.js" ></script>

    <script type="text/javascript" src="<%= request.getContextPath()%>resources/js/jNotify.jquery.js"></script>
</head>

<body ng-app="myapp">
<!--头部开始-->
<%
    Assertion assertion = AssertionHolder.getAssertion();

    AttributePrincipal ap =  assertion.getPrincipal();   //获取AttributePrincipal对象，这是客户端对象

    String name = ap.getName();

    Map<String,Object> att = ap.getAttributes();//获取属性值，为一个Map类型。

%>

<div id="head">
    <div id="head_con">
        <p class="title">智能报修系统</p>
        <div id="head_right">
            <a href="#">
						<span>
						<img src="../../resources/img/email.png"/>
					</span> 收件箱
            </a>
            <button id="downloadAPP">APP下载</button>
        </div>
    </div>
</div>
<!--头部结束-->
<!--左边开始-->
<!--左边-->
<div id="staffLeft">
    <div id="staffLeftCon">
        <!--运维人员的信息-->

        <div id="staffInfo" ng-controller="InformationCtrl">
            <!--运维人员姓名-->
            <p class="staffName">{{repairmaninfo.userName}}</p>
            <!--运维人员学号-->
            <p class="staffNum"><%=name %></p>
            <input type="hidden" class="useraccount" value="<%=name %>"/>
            <!--运维人员职位-->
            <p class="place">运维人员</p><!--运维人员写死了，需要可以再次修改-->
        </div>

        <style>
            #operation a:link,a:visited,a:hover{
                text-decoration: none;
                color: #4e7500;
            }
        </style>
        <div id="operation">
            <ul >
                <a href="/PCrepairman_one"> <li>我的工单</li></a>
            <a href="/PCrepairman_two"><li id="two" >待处理</li></a>
                <a href="/PCrepairman_three"><li id="three" class="active">我的绩效</li></a>
                <a href="/PCrepairman_four"> <li id="four" >我的信息</li></a>
            </ul>
        </div>
        <div class="phoneNum" ng-controller="PhoneInformationCtrl">
            服务电话：{{phoneNum}}
        </div>
    </div>
</div>

<!--左边结束-->
<!--右边开始-->
<div id="pushOrdersRight">



    <div id="pushOrdersRightShow">

        <div id="MYPERFORMATION" class="list">

            <div id="dataChoose">
               <!-- <input id="chooseYear" placeholder="请输入年份如2018" maxlength="4" minlength="4"/>年-->
               <!-- <input id="chooseMonth" placeholder="请输入月份如4或12" maxlength="2" minlength="1"/>月-->


                <select name="chooseYear" id="chooseYear" maxlength="4" minlength="4">
                    <option value=null selected>请选择年份</option>
               <option value="2017">2017</option>
               <option value="2018">2018</option>
               <option value="2019">2019</option>
                </select>

                <select name="chooseMonth" id="chooseMonth" maxlength="4" minlength="4">
                    <option value="0" selected>请选择月份</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>

                <button type="button" id="chooseGrade">查询</button>
            </div>

            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: 800px">
                <script type="text/javascript">
                    var currentyear = "";
                    var currentmonth = "";

                    $("#chooseGrade").click(function(){
                        var year1= angular.element(document.getElementById("chooseYear")).val();
                        var month1=angular.element( document.getElementById("chooseMonth")).val();
                        currentmonth = month1;
                        currentyear = year1;
                        console.log(year1);
                        console.log(month1);


                        var option = {
                            tooltip: {},
                            legend: {
                                data: [""+currentyear+"/"+currentmonth],
                                textStyle: {fontWeight: 'bold', fontSize: 16},
                                width: main.style.width
                            },
                            xAxis: {
                                data: [ "未完成工单","总单数",  "甩单数","本月单", "已完成工单数"],
                                axisLabel: {
                                    interval: 0//横轴信息全部显示
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#295436'
                                    }
                                }
                            },
                            yAxis: {
                                axisLine: {
                                    lineStyle: {
                                        color: '#295436'
                                    }
                                }
                            },
                            series: [{
                                name: ""+currentyear+"/"+currentmonth,
                                type: 'bar',
                                data: [],
                                barWidth: 40,
                                itemStyle: {
                                    normal: {
                                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                        color: function (params) {
                                            var colorList = ['#FF713C', '#F2FF3C', '#BCFF3A', '#3CFFC4', '#00DB66'];
                                            return colorList[params.dataIndex];
                                        },
                                        label: {//给柱状图上添加数据
                                            show: true,
                                            position: 'top',
                                            textStyle: {
                                                color: '#615a5a'
                                            },
                                            formatter:function(params){
                                                if(params.value==0){
                                                    return '';
                                                }else
                                                {
                                                    return params.value;
                                                }
                                            }
                                        }
                                    }
                                }
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        //用于使chart自适应高度和宽度
                        window.onresize = function () {
                            //重置容器高宽
                            resizeWorldMapContainer();
                            myChart.resize();
                        };


                        var xdatas = [];

                        var one={'receiveOne':1506101090,'year':year1,'month':month1};
                        $.ajax({
                            type: "POST",//请求方式
                            url: "http://localhost:8080/countWorkOrder",//地址，就是json文件的请求路径
                            async: true,
                            data: JSON.stringify(one),//解决400错误
                            dataType: "json",//数据类型可以为 text xml json  script  jsonp
                            contentType: 'application/json;charset=UTF-8',//解决415错误
                            success: function (result) {//返回的参数就是 action里面所有的有get和set方法的参数
                                console.log(result.data);
                                if (result) {

                                    //分别取出这几个值
                                    var key1 = "未完成";
                                    var value1 = result.data[key1];

                                    var key2= "总单数";
                                    var value2 = result.data[key2];

                                    var key3= "甩单数";
                                    var value3 = result.data[key3];

                                    var key4= "本月单";
                                    var value4 = result.data[key4];

                                    var key5= "已完成";
                                    var value5 = result.data[key5];

//                            将取出的值的value组成新的数组
                                    var values =  [value1,value2,value3,value4,value5];
//                            console.log(values);

                                    for (var i = 0; i < 5; i++) {
                                        xdatas.push(values[i]);    //挨个取出类别并填入类别数组
                                    }
                                    myChart.setOption({
                                        yAxis:{},
                                        series:{
                                            data:xdatas
                                        }
                                    });

                                }
                            }, error: function () {
                                alert("获取运维业绩失败，请重试！");
                            }
                        });


                    });



                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById("main"));
                    var main = document.getElementById("main");

                    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
                    var resizeWorldMapContainer = function () {
                        main.style.width = window.innerWidth*0.6 + 'px';

                    };
                    //设置容器宽高
                    resizeWorldMapContainer();


                    //    设置时间  默认显示当前月份
                    var currentdate = new Date();
                    currentyear = currentdate.getFullYear();

                    currentmonth = currentdate.getMonth()+1;


                    // 指定图表的配置项和数据
                    var option = {
                        tooltip: {},
                        legend: {
                            data: [""+currentyear+"/"+currentmonth],
                            textStyle: {fontWeight: 'bold', fontSize: 16},
                            width: main.style.width
                        },
                        xAxis: {
                            data: [ "未完成工单","总单数",  "甩单数","本月单", "已完成工单数"],
                            axisLabel: {
                                interval: 0//横轴信息全部显示
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#295436'
                                }
                            }
                        },
                        yAxis: {
                            axisLine: {
                                lineStyle: {
                                    color: '#295436'
                                }
                            }
                        },
                        series: [{
                            name: ""+currentyear+"/"+currentmonth,
                            type: 'bar',
                            data: [],
                            barWidth: 40,
                            itemStyle: {
                                normal: {
                                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                    color: function (params) {
                                        var colorList = ['#FF713C', '#F2FF3C', '#BCFF3A', '#3CFFC4', '#00DB66'];
                                        return colorList[params.dataIndex];
                                    },
                                    label: {//给柱状图上添加数据
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            color: '#615a5a'
                                        },
                                        formatter:function(params){
                                            if(params.value==0){
                                                return '';
                                            }else
                                            {
                                                return params.value;
                                            }
                                        }
                                    }
                                }
                            }
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    //用于使chart自适应高度和宽度
                    window.onresize = function () {
                        //重置容器高宽
                        resizeWorldMapContainer();
                        myChart.resize();
                    };




                    //定义一个数组来放坐标值
                    var xdatas = [];

                    var one={'receiveOne':1506101090,'year':currentyear,'month':currentmonth};
                    $.ajax({
                        type: "POST",//请求方式
                        url: "http://localhost:8080/countWorkOrder",//地址，就是json文件的请求路径
                        async: true,
                        data: JSON.stringify(one),//解决400错误
                        dataType: "json",//数据类型可以为 text xml json  script  jsonp
                        contentType: 'application/json;charset=UTF-8',//解决415错误
                        success: function (result) {//返回的参数就是 action里面所有的有get和set方法的参数
                            console.log(result.data);
                            if (result) {

                                //分别取出这几个值
                                var key1 = "未完成";
                                var value1 = result.data[key1];

                                var key2= "总单数";
                                var value2 = result.data[key2];

                                var key3= "甩单数";
                                var value3 = result.data[key3];

                                var key4= "本月单";
                                var value4 = result.data[key4];

                                var key5= "已完成";
                                var value5 = result.data[key5];

//                            将取出的值的value组成新的数组
                                var values =  [value1,value2,value3,value4,value5];
//                            console.log(values);

                                for (var i = 0; i < 5; i++) {
                                    xdatas.push(values[i]);    //挨个取出类别并填入类别数组
                                }
                                myChart.setOption({
                                    yAxis:{},
                                    series:{
                                        data:xdatas
                                    }
                                });

                            }
                        }, error: function () {
                            alert("获取运维业绩失败，请重试！");
                        }
                    });


                </script>

            </div>

        </div>

        <!--我的信 息-->



    </div>

</div>
<!--右边结束-->




<%--<div id="footer" class="footer">--%>
    <%--<p class="footerWord">版权所有&nbsp;四川旅游学院</p>--%>
<%--</div>--%>


</body>

</html>